<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>列表渲染</title>
</head>
<body>
  <div id="root">
    <h2>为data中的数据对象追加属性</h2>
    <hr>
    <div>
      <!-- 追加属性data对象 -->
      <button @click = "updataPersion">更新数据</button>

      <ul v-for="p of persion" :key="p.id">
        <li>{{ p.name }} <span v-if="p.age">，年龄：{{ p.age }}</span></li>
      </ul>
    </div>
  </div>

  <script type="text/javascript">
    const vm = new Vue({
     el: '#root', 
     data: { 
       persion: [
         {id:'sk9G2O01avD',name:'张三',age:''},
         {id:'k8F4Dl7m',name:'李四',age:'34'},
         {id:'1Ff3lm0G',name:'李六',age:'54'},
         {id:'sf3Pd94pf7za',name:'张九',age:'32'},
         {id:'oB5vA0Qmm1p',name:'杰克',age:'22'}
       ],
     },
     methods: {
      updataPersion() {
        // Vue.set(this.persion[0],'age',100)
        this.$set(this.persion[0],'age',100)
      }
     },
   })
 </script>
</body>
</html>


